<template>
	<!-- 智助智能客服 (学生) -->
	<view class="container">
		<scroll-view scroll-y="true" class="msg-content" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory">
			<view style="height: 10upx;"></view>
			<view class="content" v-for="(message,index) in messagelist" :key="index">
				<!-- 当前聊天时间 -->
				<view class="time" v-if="message.show_time">
					<text>{{message.show_time}}</text>
				</view>
				<view :id="'msg'+index">
					<!-- 客服发送的消息 -->

					<view class="msg-left" v-if="message.my === 0">
						<navigator hover-class="none" :url="'../school/my-center?user_id='+toUserinfo.user_id" class="avatar customerAvatar">
							<image :src="(toUserinfo.avatar && (toUserinfo.avatar.indexOf('http')!=-1))?toUserinfo.avatar:defheadimg" mode=""></image>
						</navigator>

						<view class="msg_content" v-if="message.content_type==1">
							<view class="item"></view>
							<view class="message">
								<text>{{message.content}}</text>
							</view>
						</view>
						<view class="msg_content" v-if="message.content_type==2">
							<image class="img" @tap="previewImage(message.content)" :src="message.content" mode="widthFix"></image>
						</view>
						<view class="msg_content" v-if="message.content_type==3">
							<view class="item"></view>
							<view class="vediomessage play" @tap="playVoice(message.content)">
								<!-- <text>{{message.chatMsg}}</text> -->
								<i class="iconfont  iconyuyin-jieshou"></i>
							</view>
						</view>
						<!-- 视频 -->
						<view class="msg_content" v-if="message.content_type==4">
							<view class="item"></view>
							<view class="message">
								<text>我分享了个视频给你,<span @click="gotoplay(message.content)" style="text-decoration: underline;">点击查看</span>吧！</text>
							</view>
						</view>

					</view>
					<view class="msg-right" v-if="message.my === 1">
						<!-- 文本 -->
						<view class="msg_content" v-if="message.content_type==1">
							<view class="message">
								<text>{{message.content}}</text>

							</view>
							<view class="item"></view>
						</view>
						<!-- 图片 -->
						<view class="msg_content" v-if="message.content_type==2">
							<image class="img"  @tap="previewImage(message.content)" :src="message.content" mode="widthFix"></image>
						</view>
						<!-- 语言消息 -->
						<view class="msg_content" v-if="message.content_type==3">
							<view class="vediomessage play" @tap="playVoice(message.content)">
								<!-- <text>{{message.chatMsg}}</text> -->
								<i class="iconfont  iconyuyin-fasong"></i>
							</view>
							<view class="item"></view>
						</view>
						<!-- 视频 -->
						<view class="msg_content" v-if="message.content_type==4">
							<view class="item"></view>
							<view class="message">
								<text>我分享了个视频给你,<span @click="gotoplay(message.content)" style="text-decoration: underline;">点击查看</span>吧！</text>
							</view>
						</view>
						<!-- 头像 -->
						<navigator :url="'../school/my-center?user_id='+fromUserinfo.id" hover-class="none" class="avatar customerAvatar">
							<!-- <image :src="fromUserinfo.avatar" mode=""></image> -->
							<image :src="(fromUserinfo.avatar&&(fromUserinfo.avatar.indexOf('http')!=-1))?fromUserinfo.avatar:defheadimg" mode=""></image>
						</navigator>
					</view>
				</view>
			</view>
			<view style="height: 20upx;"></view>
		</scroll-view>
		<!-- 底部发送消息 -->
		<view class="information">
			<!-- 语音按钮 -->
			<view :class="['iconfont','iconyuyin',{'iconbianji1':isShowVoice}]" @tap="showVoice"></view>
			<view class="voice-button" type="default" v-if="isShowVoice" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng"
			 @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
			<input class="chat" type="text" v-model="chatMessage" v-else />
			<!-- ＋ -->
			<view class="iconfont iconxinjianbijibenjiahao" @tap="showMenu"></view>
			<view class="send" @tap="sendMsg(1)">发送</view>
		</view>
		<!-- 底部发送消息 -->
		<!-- 点击加号弹出 -->
		<view class="addShow" v-show="isShowMenu">
			<view @click="chooseImage(0)" class="addShowImg">
				<view class="iconfont iconxiangce"></view>
				照片
			</view>
			<view @click="chooseImage(1)" class="addShowPhoto">
				<view class="iconfont iconpaishe"></view>
				拍照
			</view>
		</view>

		<!-- 录音UI效果 -->

			<view class="record" :class="recording?'':'hidden'">
				<view class="ing" :class="willStop?'hidden':''">
					<view  class="iconfont iconyuyin-mian"></view>
				</view>
				<view  class="cancel" :class="willStop?'':'hidden'">
					<view  class="iconfont iconquxiaoluyin"></view>
				</view>
				<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
			</view>
		<!-- 语音提示框 -->
		<!-- 关注 -->
		<view v-if="is_follow&&toUserinfo.is_mutual_follow==null" class="concerned">
			<view class="cleft">
				<i class="iconfont iconcuo" @click="is_follow=false"></i>
				<view>点击关注，方便以后找到他（她）</view>
			</view>
			<view class="cbtn" @click="follow">关注</view>
		</view>
		<!-- 关注 -->

	</view>
</template>


<script>
	import utils from '@/common/util.js'
	var sourceType = [
		['album'],
		['camera'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		data() {

			return {
				defheadimg:'',
				screenHeight: uni.getSystemInfoSync().screenHeight,
				toUserinfo: '', //接收人信息
				fromUserinfo: uni.getStorageSync('userInfo'),
				token: uni.getStorageSync('token'),
				chatMessage: '', //发布内容
				messagelist: [],

				date: '',
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeType: ['压缩', '原图', '压缩或原图'],
				sourceTypeIndex: 2,
				sizeTypeIndex: 2,
				uploadurl: '',
				isShowMenu: false,
				isShowVoice: false,
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				recording: false,
				willStop: false,
				recordTis: "手指上滑 取消发送",
				voiceTis: "按住 说话",
				recordTimer: null,
				recordLength: 0,
				// 链接后返回的对象
				socketTask: {},
				// 发送的信息跟接收的信息
				scrollToView: '',
				page: 1,
				datas: [],
				time: '',
				is_follow :true

			}
		},
		onPullDownRefresh() {
			this.page = this.page + 1;
			this.getHistory();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onBackPress() {
			this.socketTask.close();
		},
		onUnload() {
			let content = '';
			let create_time= ''
			if (this.messagelist.length > 0) {
				let item = this.messagelist.pop();
				create_time = item.create_time;
				if (item.content_type == 1) {
					content = item.content;
				}
				if (item.content_type == 2) {
					content = '[图片]';
				}
				if (item.content_type == 3) {
					content = '[语音]';
				}
				if (item.content_type == 4) {
					content = '[视频]';
				}
			}	
			
			utils.Saveuser(this.toUserinfo,content,create_time);
			
		},
		onLoad(e) {
			this.defheadimg= this.defimg;
			this.toUserinfo = JSON.parse(e.data);
			this.date = Date.parse(new Date()) / 1000;
			
			uni.setNavigationBarTitle({
				title: this.toUserinfo.nicheng?this.toUserinfo.nicheng:'未设置昵称'
			})

			// 创建服务
			this.createStock();
			this.rmmsgNum();

			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
		},
		methods: {
			/* 图片预览 */
			previewImage: function(url) {
				uni.previewImage({
					current: url,
					urls:[url]
				});
			},
			/* 关注 & 取消关注 */
			follow() {
				var url = 'user/video.User/UserFollowAdd';
			
				this.$api.apiPost(url, {
					form_id: this.toUserinfo.user_id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					
					utils.Saveuser(this.toUserinfo,'','',0,1);
					this.is_follow =false;
				})
			},
			gotoplay: function(content) {
				uni.navigateTo({
					url: '/pages/school/videoplay?path=' + content
				})
			},
			/* 创建连接 */
			createStock() {
				this.socketTask = uni.connectSocket({
					url: 'ws://' + this.chatsevenUrl + '?token=' + this.token,
					success: (res) => {}
				})
				this.socketTask.onOpen(() => {
					this.socketTask.send({
						data: "测试推送",
						async success() {
							console.log("消息发送成功");
						},
					});
					this.listenMessage()
				})
			},
			// 监听服务端传递的消息
			listenMessage: function() {
				this.socketTask.onMessage((res) => {
					let data = JSON.parse(res['data']).data;
					if (data.type == 'login') {
						// this.userData = data.data;
						this.getHistory();
						// 获取对方头像名字信息 放在 toUser
					}
					if (data.type == 'send') {
						data['my'] = 1;
						data['show_time'] = this.checktime(data, this.messagelist.length, this.messagelist);
						this.messagelist.push(data);

					}
					if (data.type == 'receive') {
						if(data.fromid!=this.toUserinfo.user_id){
							let fromuser = {
								user_id:data.fromid,
								nicheng:data.from_nicheng,
								avatar:data.from_avatar,
							}
							utils.Saveuser(fromuser,data.content,data.create_time,1);
						}else{
							data['my'] = 0;
							data['show_time'] = this.checktime(data, this.messagelist.length, this.messagelist);
							this.messagelist.push(data);
						}
						
					}
					let _this = this;
					_this.$nextTick(function() {
						// 滚动到底
						_this.scrollToView = 'msg' + (_this.messagelist.length - 1)
					});

				})
			},
			rmmsgNum:function(data){
				var chatuserlist = uni.getStorageSync('chatuserlist');
				let toid = JSON.stringify(Number(this.toUserinfo.user_id));
				 chatuserlist[toid]['noneNum'] = 0;
				  uni.setStorageSync('chatuserlist',chatuserlist);
			},
			// 发送消息
			sendMsg(type) {
				var obj = {
					k_token: this.token,
					toid: [this.toUserinfo['user_id']],
					fromid: this.fromUserinfo['id'],
					content_type: type,
					from_nicheng:this.fromUserinfo.nicheng,
					from_avatar:this.fromUserinfo.avatar
				}
				switch (type) {
					case 1:
						obj.content = this.chatMessage;
						break;
					case 2:
						obj.content = this.uploadurl;
						break;
					case 3:
						obj.content = this.uploadurl;
						break;
				}
				if (this.chatMessage || this.uploadurl) {
					this.socketTask.send({
						data: JSON.stringify(obj),
						success: (res) => {
							this.chatMessage = '';
						}
					});
				}

			},
			checktime(item, index, list) {
				if (list.length > 0) {
					let time = new Date().getTime();
					if (item['create_time'] - list[index - 1]['create_time'] > 360) {
						return utils.getBriefTime(item['create_time'] * 1000);
					} else {
						return '';
					}
				} else {
					return utils.getBriefTime(item['create_time'] * 1000);
				}
			},

			/* 下拉加载聊天记录 */
			loadHistory: function() {
				this.page = this.page + 1;
				this.getHistory();
			},
			/* 获取聊天记录 */
			getHistory: function() {
				var _this = this;
				var data = {
					toid: this.toUserinfo.user_id,
					page: this.page,
					limit: 10
				};
				this.$chatapi.apiPost('api/v1/index/message/all', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.list;
						this.messagelist = list.concat(this.messagelist);
						this.messagelist.forEach((item, index) => {
							if (item['fromid'] == this.fromUserinfo['id']) {
								item['my'] = 1;
							} else {
								item['my'] = 0;
							}
							if (index > 0) {
								item['show_time'] = this.checktime(item, index, this.messagelist);
							} else {
								item['show_time'] = utils.getBriefTime(item['create_time'] * 1000);
							}
						})
						if(this.page==1){
							_this.$nextTick(function() {
								// 滚动到底
								_this.scrollToView = 'msg' + (this.messagelist.length - 1)
							});
						}
					}
				});
			},
			/* 上传图片 */
			chooseImage: function(index) {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sourceType: sourceType[index],
					sizeType: sizeType[this.sizeTypeIndex],
					success: function(res) {
						var url = res.tempFilePaths[0];
						_this.toupload(url, 2);
					}
				});
			},

			/**
			 * 语音方法
			 */
			// 打开底部面板
			showMenu() {
				this.isShowMenu = !this.isShowMenu
				this.isShowVoice = false
			},
			showVoice() {
				this.isShowVoice = !this.isShowVoice
				this.isShowMenu = false;
			},

			//录音开始
			voiceBegin(e) {
				this.voiceTis = '松开 发送';
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			//录音开始回调 设置UI效果
			recordBegin(e) {
				this.recording = true;
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				console.log(this.recordTimer,'======================');
				console.log(this.recordLength,'======================');
				clearInterval(this.recordTimer);
				if (!this.willStop &&this.recordLength>1) {
					// let msg = {
					// 	length: 0,
					// 	url: e.tempFilePath
					// }
					// let min = parseInt(this.recordLength / 60);
					// let sec = this.recordLength % 60;
					// min = min < 10 ? '0' + min : min;
					// sec = sec < 10 ? '0' + sec : sec;
					// msg.length = min + ':' + sec;
					this.toupload(e.tempFilePath, 3)
				} else {
					if(!this.willStop){
						uni.showToast({
							title:'说话时间太短',
							icon:'none'
						})
					}
				}
				this.willStop = false;
			},
			playVoice(msg) {
				this.AUDIO.src = msg;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},

			/**
			 * 语音方法
			 */

			/* 上传文件 */
			toupload: function(url, index) {
				var _this = this;
				this.$uapi.apifile('api/v1/upload', {
					file: url
				}).then(res => {
					_this.uploadurl = JSON.parse(res.data).data.fileUrl;
					_this.sendMsg(index);
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54upx;
		height: 100%;
	}

	/* 语音提示框 */
	.voice-container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 400upx;
		height: 400upx;
		background: rgba(51, 51, 51, 1);
		opacity: 0.5;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.iconyuyin1 {
		font-size: 150upx;
		color: #FFFFFF;
	}

	.voice-time {
		color: #FFFFFF;
		font-size: 40upx;
		line-height: 68upx;
	}

	/* 父容器 */
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* 聊天信息滚动框 */
	.msg-content {
		width: 100%;
		// height: calc(100vh - 500upx);
		flex: 1;
		overflow: auto;
		// padding-bottom: 28upx;
	}

	.msg-content .content {
		padding: 0 30upx;
	}


	/* 左边客服消息 */
	.msg-left {
		display: flex;
		align-items: flex-start;
		margin-top: 48upx;

		.msg_content {
			display: flex;
			justify-content: flex-start;
			margin-left: 20upx;

			.item {
				top: 30upx;
				height: 0upx;
				width: 0upx;
				position: relative;
				border: 10upx solid;
				border-color: transparent #fff transparent transparent;
			}

			.message {
				font-size: 30upx;
				background: #FFFFFF;
				border-radius: 12upx;
				padding: 12upx 15upx;
				color: #333333;
				text-align: left;
				max-width: 480upx;
				word-break: break-all;

			}

			.img {
				width: 300upx;
				border-radius: 20upx;
			}

			.vediomessage {
				font-size: 32upx;
				background: #FFFFFF;
				border-radius: 8upx;
				padding: 12upx;
				display: flex;
				justify-content: flex-start;


			}
		}
	}

	.msg-right {

		display: flex;
		justify-content: flex-end;
		margin-top: 48upx;

		.msg_content {
			display: flex;
			justify-content: flex-end;
			margin-right: 20upx;

			.item {
				top: 30upx;
				height: 0upx;
				width: 0upx;
				position: relative;
				border: 10upx solid;
				border-color: transparent transparent transparent #fff;
			}

			.message {
				font-size: 32upx;
				background: #00ACFE;
				border-radius: 12upx;
				padding: 12upx 15upx;
				color: #FFFFFF;
				text-align: left;
				max-width: 480upx;
				word-break: break-all;
			}

			.img {
				width: 300upx;
				border-radius: 20upx;
			}

			.vediomessage {
				font-size: 32upx;
				background: #FFFFFF;
				border-radius: 8upx;
				padding: 12upx;
				display: flex;
				justify-content: flex-start;
			}
		}


	}


	// .msg-right .item {
	// 	position: absolute;
	// 	left: -32upx;
	// 	top: 50%;
	// 	border: 10upx solid;
	// 	border-color: transparent transparent transparent #00D5A2;
	// 	transform: translateY(-50%) scaleY(.7) scaleX(1.2);
	// }

	.model-flex {
		align-items: flex-start;
	}

	/* 消息样式 */



	.customer-message {
		background: #00D5A2;
		color: #FFFFFF;
	}

	/* 头像 */
	.avatar {
		width: 80upx;
		height: 80upx;
		background: #FFFFFF;
		border-radius: 50%;
		position: relative;
	}

	/* 客服头像 */
	.avatar image {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: block;
		width: 46upx;
		height: 48upx;
		border-radius: 50%;
	}

	/* 客户头像 */
	.customerAvatar image {
		width: 76upx;
		height: 76upx;
	}

	/* 功能模块消息框 */
	.model-message {
		width: 480upx;
		background: #FFFFFF;
		font-size: 32upx;
		align-items: flex-start;
		margin: 0 32upx;
	}

	.model-message .title {
		display: block;
		color: #333333;
		margin: 26upx 0 24upx 28upx;
	}

	.model-message .message-list {
		display: flex;
		align-items: center;
		margin-bottom: 44upx;
		height: 30upx;
	}

	.model-message .message-list .dian {
		display: inline-block;
		width: 14upx;
		height: 14upx;
		background-color: #333333;
		border-radius: 50%;
		margin: 0 16upx 0 28upx;
	}

	.model-message .message-list .message {
		font-size: 30upx;
		color: #00D5A2;
		margin: 0;
		padding: 0;
	}

	.feedback {
		display: flex;
		color: #333333;
		margin-left: 16upx;
		margin-bottom: 42upx;
	}

	.feedback text {
		margin-right: 20upx;
	}

	.feedback navigator {
		color: #00D5A2;
	}

	/* 右边客户端信息 */
	.msg-right {
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		margin-top: 48upx;
	}

	.time {
		display: flex;
		justify-content: center;
		background: #E7E7E7;
		border-radius: 24upx;
		width: 260upx;
		margin: 20upx auto;
		
	}

	.time text {
		font-size: 24upx;
		color: #FFFFFF;
	}

	.sendContent {
		float: right;
		margin-right: 30upx;
		margin: 44upx 30upx 44upx 0;
	}

	.information {
		width: 750upx;
		height: 120upx;
		background: rgba(247, 247, 247, 1);
		box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.information image {
		width: 60upx;
		height: 60upx;
	}

	.iconyuyin {
		margin-left: 30upx;
		font-size: 60upx;
		color: #666666;
	}

	.iconxinjianbijibenjiahao {
		font-size: 60upx;
		color: #666666;
	}

	/* 输入框 */
	.chat {
		width: 380upx;
		height: 68upx;
		background: #FFFFFF;
		border-radius: 8upx
	}

	/* 语音按钮 */
	.voice-button {
		width: 380upx;
		height: 68upx;
		border-radius: 8upx;
		background: rgba(229, 229, 229, 1);
		text-align: center;
		line-height: 68upx;
		color: #666666;
	}

	.send {
		width: 80upx;
		height: 68upx;
		border-radius: 8upx;
		background: #00D5A2;
		line-height: 68upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		margin-right: 30upx;
	}

	/* 点击加显示 */
	.addShow {
		width: 750upx;
		height: 234upx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		justify-content: flex-start;
		color: #333333;
		font-size: 26upx;
		text-align: center;
	}

	.addShowImg {
		margin-left: 64upx;
	}

	.addShowPhoto {
		margin-left: 126upx;
	}

	.iconxiangce {
		font-size: 57upx;
		color: #00D5A2;
	}

	.iconpaishe {
		font-size: 56upx;
		color: #00ACFE;
	}


	.hidden {
		display: none !important;
	}

	.record {
		width: 250upx;
		height: 300upx;
		position: fixed;
		top: 55%;
		left: calc(50% - 125upx);
		background: rgba(0, 0, 0, 0.6);
		border-radius: 20upx;

		.ing {
			width: 100%;
			height: 200upx;
			display: flex;
			justify-content: center;
			align-items: center;

			// 模拟录音音效动画
			@keyframes volatility {
				0% {
					background-position: 0% 130%;
				}

				20% {
					background-position: 0% 150%;
				}

				30% {
					background-position: 0% 155%;
				}

				40% {
					background-position: 0% 150%;
				}

				50% {
					background-position: 0% 145%;
				}

				70% {
					background-position: 0% 150%;
				}

				80% {
					background-position: 0% 155%;
				}

				90% {
					background-position: 0% 140%;
				}

				100% {
					background-position: 0% 135%;
				}
			}

			.iconfont {
				background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
				background-size: 100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 150upx;
				height: 200upx;
				line-height: 200upx;
				color: #f09b37;
			}
		}

		.cancel {
			width: 100%;
			height: 200upx;
			display: flex;
			justify-content: center;
			align-items: center;

			.iconfont {
				color: #fff;
				font-size: 150upx;
			}
		}

		.tis {
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: center;
			font-size: 28upx;
			color: #fff;

			&.change {
				color: #f09b37;
			}
		}
	}

	/* 关注 */
	.concerned {
		position: fixed;
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #d9f6ee;
		.cleft{
			display: flex;
			justify-content: flex-start;
			color: #00D5A2;
			margin-left: 20upx;
			i{
				margin-right: 10upx;
				font-size: 35upx;
			}
		}
		.cbtn{
			width: 100upx;
			height: 60upx;
			background-color: #00D5A2;
			border-radius: 10upx;
			color: #FFFFFF;
			font-size: 26upx;
			text-align: center;
			line-height: 60upx;
			margin-right: 30upx;
		}

	}
</style>
